<template>
	<view class="clientInfo_container">
		<z-paging ref="paging" auto v-model="listData" @query="getData">
			<view class="content">
				<view class="d-flex flex-column j-sb content_item w100p mb15" v-for="item in listData" :key="item.customerCode">
					<view class="d-flex a-center j-sb mb15">
						<view class="d-flex a-center">
							<view class="line mr10"></view>
							<view class="title">{{item.customerName}}</view>
						</view>
						<view class="consumeBtn" @click="goPage(item)">去消费</view>
					</view>
					<view class="d-flex a-center j-sb mb15">
						<view class="title_item">手机号</view>
						<view class="value_item">{{item.customerPhone || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15">
						<view class="title_item">生日</view>
						<view class="value_item">{{item.customerBirthday || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15">
						<view class="title_item">会员等级</view>
						<view class="value_item">{{item.memberLevelRuleName || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">钱包余额</view>
						<view class="value_item">{{item.remainingAmount || praseStrEmpty}}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryCustomerByPlatformApp
	} from "@/api/index.js"

	export default {
		components: {},
		data() {
			return {
				userInfo: uni.getStorageSync('housekeeperInfo'),
				listData: []
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			getData(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				queryCustomerByPlatformApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					housekeeperCode: this.userInfo.housekeeperCode,
				}).then(res => {
					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},
			goPage(val) {
				uni.navigateTo({
					url: "/pages/consume/shopCar?customerCode=" + val.customerCode
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.clientInfo_container {
		
		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		// font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			box-sizing: border-box;
			padding: 30rpx 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.consumeBtn {
					background: #38d19a;
					border-radius: 12px;
					color: #ffffff;
					font-size: 28rpx;
					padding: 8rpx 26rpx;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}
			
			.content_item:last-child {
				margin-bottom: 0 !important;
			}
		}
	}
</style>